import React, {Component} from 'react';
import {useNavigate} from "react-router-dom";
import {store} from '../store'
import {Select, Input, Button, notification} from "antd";
import http from '../request'

function withRouter(Component) {
    return (props) => (
        <Component
            {...props}
            navigate={useNavigate()}
        />
    );
}

const { Option } = Select;

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            storeList: [],
            userList: [],
            user_id: 0,
            password: ''
        }
    }

    render() {
        const {storeList, userList} = this.state
        return (
            <React.Fragment>
                <div className="Login">
                    <div className="fix u-flex">
                        <img className="login" src={require('../assets/login/login-fix.png').default} alt=""/>
                        <div className="item u-p-l-30">
                            <div className="title u-text-center">学位通房源管理系统</div>
                            <div className="form u-m-t-30 u-p-10">
                                <div className="u-flex">
                                    <img src={require('../assets/login/icon-1.png').default} alt=""/>
                                    <Select bordered={false} placeholder="请选择部门" onChange={this.storeChange.bind(this)} className="u-flex-1 u-m-l-5">
                                        {
                                            storeList.map(store => <Option value={store.id} key={store.id}>{store.name}</Option>)
                                        }
                                    </Select>
                                </div>
                                <div className="u-flex u-m-t-10">
                                    <img src={require('../assets/login/icon-2.png').default} alt=""/>
                                    <Select bordered={false} placeholder="请选择姓名" onChange={this.userChange.bind(this)} className="u-flex-1 u-m-l-5">
                                        {
                                            userList.map(user => <Option vlaue={user.id} key={user.id}>{user.nickname}</Option>)
                                        }
                                    </Select>
                                </div>
                                <div className="u-flex u-m-t-10">
                                    <img src={require('../assets/login/icon-3.png').default} alt=""/>
                                    <Input.Password bordered={false} placeholder="请输入密码" onChange={this.pwdChange.bind(this)} className="u-flex-1 u-m-l-5" />
                                </div>
                            </div>
                            <Button type="primary" className="u-m-t-20" style={{width: '100%'}} onClick={this.login.bind(this)}>登录</Button>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }

    componentDidMount() {
        this.storeList()
    }
    storeList(){
        http('store.list').then(res => {
            if(res.code === 1){
                this.setState({
                    storeList: res.data.rows
                })
            }
        })
    }
    storeChange(e){
        http('user.list', {
            store_id: e
        }).then(res => {
            if(res.code === 1){
                this.setState({
                    userList: res.data
                })
            }
        })
    }
    userChange(e){
        this.setState({
            user_id: e
        })
    }
    pwdChange(e){
        this.setState({
            password: e.target.value
        })
    }
    login(){
        http('user.login', {
            user_id: this.state.user_id,
            password: this.state.password
        }).then(user => {
            if(user.code === 1){
                console.log(user.data.userinfo);
                store.dispatch({type: 'auth', value: user.data.rules})
                store.dispatch({type: 'userInfo', value: user.data.userinfo})
                this.getstaff(user.data.userinfo.id)
                notification.success({
                    message: '提示',
                    description: user.msg || '操作成功',
                    duration: 2,
                    onClose: () => {
                        this.props.navigate('/city')
                    }
                })
            } else {
                notification.error({
                    message: user.msg || '操作失败，请重试',
                })
            }
        })
    }

    // 用户权限
    getstaff = (id) => {
        http('rule.getUserPower',{id}).then(res=>{
            const newdata = res.data
            let da = {
                customer:newdata.customer,
                house1:newdata.house01,
                house2:newdata.house02,
                system:newdata.system,
                id:newdata.id,
                user_id:newdata.user_id
            }
            for (const key in da) {
                for (const key2 in da[key]) {
                    for (const key3 in da[key][key2]) {
                        if(key3 === 'value' && (da[key][key2][key3] === '1' || da[key][key2][key3] === '0' )) da[key][key2][key3] = da[key][key2][key3]*1
                    }
                }
            }
            store.dispatch({type:'staff', value:da})
            console.log(store.getState());
            
        }).catch(err=>console.log(err))
    }
}

export default withRouter(Login);